<template>
  <div>
    <div class="title">
      <h2>{{$route.query.q}}</h2>
      <span>搜索到{{ Math.ceil(total) }}条内容</span>
    </div>
    <div class="content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="歌曲" name="歌曲">
          <el-table
          :data="list"
          style="width: 100%"
          @row-dblclick="goTo1"
          >
          <el-table-column
            type="index"
            width="80">
          </el-table-column>
          <!-- <el-table-column
            width="80">
            <template slot-scope="scope">
          <span><img :src="scope.row.album.blurPicUrl" alt=""></span>
        </template>
          </el-table-column> -->
          <el-table-column
            label="歌名"
            width="260"
            >
            <template slot-scope="scope">
              <p>{{scope.row.name}}<i v-if="scope.row.mvid!=0" class="el-icon-video-camera"></i></p>
              <span style="font-size: 12px;color: gray;">{{scope.row.album.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="歌手"
            width="180">
            <template slot-scope="scope">
              <span>{{scope.row.artists[0].name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="专辑"
            width="260">
            <template slot-scope="scope">
              <span>{{scope.row.album.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="duration"
            label="时长"
            width="180">
          </el-table-column>
        </el-table>
        </el-tab-pane>
        <el-tab-pane label="歌单" name="歌单">
          <div class="tab_content">
          <div class="item" v-for="p in playlist" :key="p.id" @click="goDetil(p.id)">
            <div class="img_wrap">
              <div class="num_wrap">
                播放量：
                <span class="num">{{p.playCount}}</span>
              </div>
              <img :src="p.coverImgUrl" alt="">
              <span></span>
            </div>
            <div class="p">
              <p class="name">{{p.name}}</p>
            </div>
          </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="MV" name="MV">
          <div class="mv">
            <div class="mv_item" v-for="m in mvlist" :key="m.id" @click="toMv(m.id)">
              <div class="img">
                <img :src="m.cover" alt="">
                <span><i class="iconfont icon-24gl-play"></i> 播放量:{{m.playCount}}</span>
              </div>
              <div class="text">
                <div><p>{{m.name}}</p></div>
                <span>{{m.artistName}}</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      
    </div>
    <el-pagination
    style="margin-bottom: 60px"
    @current-change="handlePage"
    background
    layout="prev, pager, next"
    :current-page="page"
    :page-size="limit"
    :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
    name: 'ResultPage',
    data(){
      return{
        activeName: '歌曲',
        list: [],
        playlistCount: '',
        // 歌单内容
        playlist: [],
        // mv内容
        mvlist: [],
        total: 10,
        // 页码
        page: 1,
        type: 1,
        limit: 10
      }
    },
    created(){
      this.getSearch()
    },
    methods: {
      getSearch(){
        this.$axios({
            url: '/search',
            method: 'get',
            params: {
              keywords: this.$route.query.q,
              type: this.type,
              limit: this.limit,
              offset: (this.page-1)*10
            }
          }).then(res=>{
            console.log('123',res.data)
            // 歌曲
            if(this.type==1){
              this.list = res.data.result.songs
              // 处理时长格式
              if(this.list.length){
                for(let i=0;i<this.list.length;i++){
                  // 获取总时长(毫秒)
                  let duration = this.list[i].duration
                  let min = parseInt(duration/1000/60)
                  min = (min<10?'0'+min:min)
                  let sec = parseInt(duration/1000%60)
                  sec = (sec<10?'0'+sec:sec)
                  this.list[i].duration = min+':'+sec
                }
              }
              // 总页数
              this.total = Math.ceil(res.data.result.songCount/10)
            }
            // 歌单
            else if(this.type==1000){
              console.log('222',res.data.result)
              this.playlist = res.data.result.playlists
              for(let i=0;i<this.playlist.length;i++){
                this.playlist[i].playCount = this.playlist[i].playCount>100000?parseInt(this.playlist[i].playCount/10000)+'万':this.playlist[i].playCount
              }
              this.total = res.data.result.playlistCount
            }
            // mv
            else if(this.type==1004){
              console.log('333',res.data.result)
              this.mvlist = res.data.result.mvs
              for(let i=0;i<this.mvlist.length;i++){
                this.mvlist[i].playCount = this.mvlist[i].playCount>10000?parseInt(this.mvlist[i].playCount/10000)+'万':this.mvlist[i].playCount
              }
              this.total = Math.ceil(res.data.result.mvCount/2)
            }
          })
      },
      handleClick(){
        this.page = 1
        switch(this.activeName){
          case '歌曲': 
            this.type = 1
            this.limit = 10
          break;
          case '歌单': 
            this.type = 1000
            this.limit = 10
          break;
          case 'MV': 
            this.type = 1004
            this.limit = 8
          break;
          default:
          break;
        }
        this.getSearch()
      },
      goTo1(row){
        console.log(row)
        this.$axios({
          url: '/song/url',
          method: 'get',
          params: { id: row.id }
        }).then(res=>{
          console.log(res.data.data[0].url)
          this.$bus.$emit('music',res.data.data[0].url)
        })
      },
      goDetil(id){
        this.$router.push({
          name: 'playlist',
          query: { q: id }
        })
      },
      toMv(id){
        this.$router.push({
          name: 'mvpage',
          query: {
            q: id
          }
        })
      },
      handlePage(val){  
        this.page = val
        this.getSearch()
      },
    }
}
</script>

<style lang="less" scoped>
.el-table-column{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
img{
  display: block;
  width: 50%;
  height: 30%;
}
.el-table__cell{
  position: relative;
}
.el-icon-video-play{
  position: absolute;
  top: 18px;
  left: 18px;
  opacity: 0;
  font-size: 25px;
  border-radius: 50%;
}
.el-icon-video-play:hover{
  opacity: 1;
  position: absolute;
  top: 25px;
  left: 25px;
  color: red;
  background-color: #ccc;
  cursor: pointer;
}
.tab_content{
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    .item{
      position: relative;
      width: 15%;
      margin: 20px 10px;
      height: 40%;
      cursor: pointer;
      img{
        width: 100%;
      }
      .num_wrap{
        position: absolute;
        top: 0;
        right: 0;
        height: 30px;
        font-size: 12px;
        color: white;
      }
      .p{
        height: 45px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        p{
          display: inline;
          font-size: 14px;
        }
      }
    }
  }
.mv{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .mv_item{
    width: 20%;
    padding: 10px;
    cursor: pointer;
    .img{
      position: relative;
      img{
        display: block;
        width: 100%;
      }
      span{
        display: block;
        position: absolute;
        top: 0;
        color: white;
        font-size: 12px;
      }
    }
    .text{
      width: 100%;
      height: 30%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      div{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        p{
          display: inline;
          white-space: nowrap;
        }
      }
      span{
        font-size: 12px;
        color: #ccc;
      }
    }
  }
}
</style>